<template>
  <el-container class="layout-container-demo" style="height: 500px">

    <el-container>
      <el-header style="background: #92adce;  font-size: 12px; height: 46px">
        <van-nav-bar
            title="选 课"
            left-text=""
        >

          <template #right>
                  <div class="toolbar-right">
                    <span>{{ userInfo.studentName }}</span>
                  </div>
          </template>

        </van-nav-bar>

      </el-header>




      <el-main>
        <el-scrollbar>
          <el-table
              :data="tableData "
              :cell-style="{padding:2+'px'}"
              :header-cell-style="{color: '#757171', fontSize: '12px', backgroundColor: '#qua'}"
          >
            <el-table-column align="center" label="选课号" width="55" key="slot">
              <template #default="scope">
                <span>{{ scope.row.selectId }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="课程号" width="55" key="slot">
              <template #default="scope">
                <span>{{ scope.row.courseId }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="课程名" width="55" key="slot">
              <template #default="scope">
                <span>{{ scope.row.courseName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="学分" width="55"  key="slot">
              <template #default="scope">
                <span>{{ scope.row.credit }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="开课" width="55" key="slot">
              <template #default="scope">
                <span>{{ scope.row.needNum }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="已选" width="55"  key="slot">
              <template #default="scope">
                <span>{{ scope.row.selectedNum }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="55"  key="slot">
              <template #default="scope">
                <el-button type="primary" @click="submitForm(scope.row)">选课</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>

import {ElMessageBox} from 'element-plus';
import {onMounted, ref} from 'vue'
import {Menu as IconMenu, Message, Setting} from '@element-plus/icons-vue'
import axios from "axios";
import {showFailToast} from "vant";


let userInfo = ref({
  studentId: -1,
  userName: -1,
  studentName: '',
})


let tableData = ref([]);

// const tableData = ref(Array.from({ length: 6 }).fill(form))

// function reset() {
//   this.form = {
//     selectId: null,
//     courseId: null,
//     courseName: null,
//     credit: null,
//     needNum: null,
//     selectedNum: null
//   }
// }


function getTableData() {
  // reset();
  axios.get("/course/course_wait_selection/cwslist").then((res) => {
    tableData.value = res.data;
  }).catch((err) => {

  });
}


//onMounted当页面加载时，显示数据
onMounted(() => {
  getTableData();

  axios.get('/getInfo', {
    headers: {
      'Authorization': 'Bearer ' + sessionStorage.token
    }
  }).then(res => {
    userInfo.value.userName = res.data.user.userName;
    userInfo.value.studentId = res.data.user.studentId;
    userInfo.value.studentName = res.data.student.name;
  }).catch(error => {
    // 请求失败，弹出提示消息
    showFailToast('登录失效，请重新登录！');
  });

});

function confirm(content) {
  return ElMessageBox.confirm(content, "系统提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: "warning",
  })
}

function submitForm(row) {
  if (row.isEmpty) {
    showFailToast("课程不存在！");
    return;
  }

  this.confirm(`是否确认选择${row.courseName}课程？`).then(function () {
    row['studentId'] = userInfo.value.studentId;
    row['studentName'] = userInfo.value.studentName;
    return axios.post("/course/course_selected/student_select", row);
  }).then((res) => {
    if (res.data.code === 200) {
      showFailToast('选课成功！');
      //刷新
      getTableData();

    } else {
      showFailToast('' + res.data.msg);
    }
  }).catch((res) => {
    showFailToast('错误：' + res.data.code);
  });
}

</script>

<style lang="less" scoped>

  /deep/ .el-table .cell {
    padding: 3px 0px;

  }

  .el-button {
    padding: 4px 8px;
  }


  .layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
  }

  .layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
  }

  .layout-container-demo .el-menu {
    border-right: none;
  }

  .layout-container-demo .el-main {
    padding: 0px;
  }

  .layout-container-demo .el-main span {
    font-size: 12px;
  }

  .layout-container-demo .el-main .el-button {
    width: 34px;
    height: 25px;
    font-size: 12px;
    background-color: #92adce;
    border: none;
  }





  .layout-container-demo .toolbar-right {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
  }


</style>
